<template>
  <div class="main">
    <div class="header">
      <div class="headerItem1">
        <div class="headerItem1Block"></div>
        <div class="headerItem1Text">体检项目管理</div>
      </div>
      <div class="headerItem2">
        <el-button type="primary" plain @click="details2">删除</el-button>
        <el-button type="primary" @click="physicalExaminationProjectAdd"
          >新增项目信息</el-button
        >
      </div>
    </div>
    <div class="section">
      <div class="sectionBtn">
        <el-button
          v-for="item in btnactive"
          :class="{ active: item.type }"
          @click="btnGaib(item)"
          link
        >
          {{ item.name }}
        </el-button>
      </div>
      <div class="sectionForm">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="formInline.packageName"
              placeholder="请输入套餐名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="sectionTable">
        <el-table
          ref="multipleTableRef"
          :data="nowData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column property="projectID" label="项目ID" />
          <el-table-column property="projectName" label="项目名称" />
          <el-table-column property="projectPrice" label="项目价格（元）" />
          <el-table-column
            property="packageName"
            label="所属套餐"
            width="350"
          />
          <el-table-column
            property="projectIntroduction"
            label="项目介绍"
            width="350"
          />
          <el-table-column property="announcements" label="注意事项" />
          <el-table-column
            property="projectStatus"
            label="项目状态"
            width="200"
          >
            <template #default="scope">
              <el-switch
                v-model="scope.row.projectStatus"
                active-text="使用中"
                inactive-text="未使用"
                active-value="true"
                inactive-value="false"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-icon color="#006eff" :size="23" @click="details(scope.row)"
                ><DeleteFilled
              /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <page
        class="sectionFooter"
        :count="count"
        @changePage="changePage"
      ></page>
    </div>
  </div>

  <!-- 删除弹框 -->
  <el-dialog v-model="centerDialogVisible" width="25%" center>
    <div class="tiShi">
      <div>
        <el-icon color="#006EFF" :size="50"><WarningFilled /></el-icon>
      </div>
      <div class="tiShiText1">删除确认</div>
      <div class="tiShiText2">删除后无法恢复，确定要删除此条信息吗？</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="del">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除弹框 -->
  <el-dialog v-model="centerDialogVisible2" width="25%" center>
    <div class="tiShi">
      <div>
        <el-icon color="#006EFF" :size="50"><WarningFilled /></el-icon>
      </div>
      <div class="tiShiText1">删除确认</div>
      <div class="tiShiText2">删除后无法恢复，确定要删除此条信息吗？</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="delAllPhysicalExaminationProject2"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter } from "vue-router";
import {
  getPhysicalExaminationProject,
  delPhysicalExaminationProject,
  delAllPhysicalExaminationProject,
} from "../../utils/api/tiJian";
import page from "../../components/appointmentExamination/yema.vue";
export default {
  components: { page },
  props: {},
  setup() {
    const data = reactive({
      btnactive: [
        {
          id: 1,
          name: "体检套餐",
          type: false,
        },
        {
          id: 2,
          name: "体检项目",
          type: true,
        },
        {
          id: 3,
          name: "套餐类型",
          type: false,
        },
      ],
      formInline: {
        packageName: "",
      },
      tableData: [],
      centerDialogVisible: false,
      centerDialogVisible2: false,
      count: null,
      nowPage: 1,
      multipleSelection: [],
    });
    let id;
    const nowData = computed(() => {
      let qiShi = (data.nowPage - 1) * 3;
      return data.tableData.slice(qiShi, qiShi + 3);
    });
    const changePage = (page) => {
      data.nowPage = page;
    };
    const router = useRouter();
    const btnGaib = (obj) => {
      data.btnactive.forEach((item) => {
        if (item.name == obj.name) {
          item.type = true;
          if (obj.name == "体检套餐") {
            router.push({
              path: "/home/hospitalInfoManage/medicalPlan",
            });
          } else if (obj.name == "套餐类型") {
            router.push({
              path: "/home/hospitalInfoManage/packageType",
            });
          }
        } else {
          item.type = false;
        }
      });
    };

    const details = (scope) => {
      // console.log(scope);
      id = scope.physicalExaminationID;
      data.centerDialogVisible = true;
    };
    const details2 = () => {
      data.centerDialogVisible2 = true;
    };

    const physicalExaminationProjectAdd = () => {
      router.push({
        path: "/home/hospitalInfoManage/physicalExaminationProjectAdd",
      });
    };

    const getPhysicalExaminationProject2 = () => {
      getPhysicalExaminationProject().then((data2) => {
        // console.log(data2);
        data.tableData = []; //为了解决重复渲染
        if (data2.data.code == 200) {
          let arr = [];
          data2.data.data.forEach((item) => {
            if (arr.indexOf(item.projectName) == -1) {
              arr.push(item.projectName);
              data.tableData.push(item);
            } else {
              data.tableData[
                arr.indexOf(item.projectName)
              ].packageName += `,${item.packageName}`;
            }
          });
          // console.log(data.tableData);
          // data.tableData = data2.data.data;
          data.count = data.tableData.length;
        }
      });
    };
    getPhysicalExaminationProject2();

    const del = () => {
      delPhysicalExaminationProject(id).then((delData) => {
        console.log(delData);
        if (delData.data.code == 200) {
          getPhysicalExaminationProject2();
          data.centerDialogVisible = false;
        }
      });
    };

    const onSubmit = () => {
      getPhysicalExaminationProject(data.formInline).then((searchData) => {
        console.log(searchData);
        if (searchData.data.code == 200) {
          data.tableData = searchData.data.data;
          data.count = data.tableData.length;
        }
      });
    };

    //这里是被选中的表格数据为数组
    const handleSelectionChange = (val) => {
      // data.multipleSelection = val;
      for (let i = 0; i < val.length; i++) {
        data.multipleSelection[i] = val[i].physicalExaminationID;
      }
      console.log(val);
      console.log(data.multipleSelection, "llll");
    };

    const delAllPhysicalExaminationProject2 = () => {
      delAllPhysicalExaminationProject(data.multipleSelection).then(
        (dataAll) => {
          console.log(dataAll);
          if (dataAll.data.code == 200) {
            getPhysicalExaminationProject2();
            data.centerDialogVisible2 = false;
          }
        }
      );
    };
    return {
      ...toRefs(data),
      btnGaib,
      details,
      details2,
      physicalExaminationProjectAdd,
      nowData,
      changePage,
      del,
      onSubmit,
      handleSelectionChange,
      delAllPhysicalExaminationProject2,
    };
  },
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .headerItem1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .headerItem1Block {
      width: 50px;
      height: 13px;
      background-color: #006eff;
      border-radius: 20px;
    }
    .headerItem1Text {
      font-size: 30px;
      margin-left: 20px;
    }
  }
  .headerItem2 {
    .el-button {
      padding: 20px;
      box-sizing: border-box;
      font-size: 18px;
    }
  }
}
.section {
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  margin-top: 20px;
  .sectionBtn {
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(194, 188, 188, 0.486);
    .el-button {
      font-size: 18px;
    }
    .el-button:hover {
      color: #006eff;
    }
  }
  .sectionForm {
    padding: 20px 0;
    box-sizing: border-box;
    .el-input {
      width: 300px;
    }
  }
  .sectionFooter {
    // border: 1px solid red;
    padding: 30px;
    box-sizing: border-box;
    margin-top: 20px;
  }
}
.active {
  color: #006eff;
}
.tiShi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .tiShiText1 {
    font-size: 20px;
    padding: 20px;
    box-sizing: border-box;
  }
  .tiShiText2 {
    color: #c5c5c5;
  }
}
</style>